<template>
  <div id="app">
    <div class="app-header">
      <div class="header-inner">
        <router-link :to="{ path: '/' }" tag="div" class="header-logo">
          <img src="./assets/logo.png" alt="">
        </router-link>
        <div class="header-nav">
          <ul class="nav-list">
            <router-link v-for="item in headerNavs" :to="{ path: item.path }" tag="li" active-class="active">
              {{ item.name }}
            </router-link>
          </ul>
        </div>
        <div class="header-search">
  
        </div>
      </div>
    </div>
    <router-view></router-view>
    <div class="app-footer">
      <p>@2017 by JankChen</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      headerNavs: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '产品与服务',
          path: '/productsAndServers'
        },
        {
          name: '市场活动',
          path: '/marketActivity'
        },
        {
          name: '资源',
          path: '/resources'
        },
        {
          name: '关于我们',
          path: '/aboutUs'
        }
      ]
    }
  },
  created: function () {
    // this.$http.post('getList', { userId: 123 })
    //   .then(function (data) {
    //     console.log(data)
    //   }, function (err) {
    //     console.log(err)
    //   })
  }
}
</script>

<style>
@import 'assets/css/reset.css';

body {
  background: #f2f2f2;
}

.app-header {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #ddd;
  background: #fff;
}

.header-inner {
  width: 1200px;
  margin: 0 auto;
}
.header-inner:after{
  content: '';
  clear: both;
}

.header-logo {
  float: left;
  cursor: pointer;
}

.header-logo img {
  height: 48px;
  margin-top: 16px;
}

.header-nav {
  float: left;
  margin-top: 24px;
  margin-left: 80px;
}

.header-nav li {
  display: inline-block;
  padding: 8px 20px;
  cursor: pointer;
  color: #3a3a3a;
}

.header-nav li.active {
  color: #4fc08d;
}
.app-section{
  margin-top: 36px;
}
.section-inner{
  display: flex;
  width: 1200px;
  margin: 0 auto;
}
.app-footer {
  width: 100%;
  height: 120px;
  margin-top: 48px;
  background: #ececec;
}

.app-footer p {
  line-height: 120px;
  text-align: center;
  color: #999;
}
</style>
